<template>
    <el-table-column v-if="mybtns.length > 0" label="操作" :fixed="isFixed?'right':undefined" :width="width" >
        <template slot-scope="scope">
            <template v-if="mybtns.length <= 3" >
                <button 
                    v-for="(item) in myfilterBtns(scope.row,mybtns)" 
                    :key="item.prop"  
                    :style="{color:item.prop.toLowerCase().indexOf('delete') > -1?'#f56c6c':''}" 
                    type="button" 
                    @click.stop="handleClick(scope.$index, scope.row,item.prop)"
                    class="el-button el-button--text el-button--mini">
                    <span>{{item.label}}</span>
                </button>
            </template>
            <template v-else >
                <button 
                    v-for="(item) in myfilterBtns(scope.row,btns1)" 
                    :key="item.prop"  
                    :style="{color:item.prop.toLowerCase().indexOf('delete') > -1?'#f56c6c':''}" 
                    type="button" 
                    @click.stop="handleClick(scope.$index, scope.row,item.prop)"
                    class="el-button el-button--text el-button--mini">
                    <span>{{item.label}}</span>
                </button>

                <el-dropdown :size="size" style="margin-left:8px" @command="handleCommand">
                    <span class="el-dropdown-link" >
                        <i class="el-icon-more"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item :command="{rowIndex:scope.$index,row:scope.row,type:item.prop}"  v-for="(item) in myfilterBtns(scope.row,btns2)" :key="item.prop" >
                            {{item.label}}
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </template>
        </template>
    </el-table-column>
</template>

<script>
export default {
    name:'l-table-btns',
    props: {
        size:{
            type:String,
            default:'mini'
        },
        btns:{
            type:Array,
            default:()=>[]
        },
        filterBtns:{
            type:Function
        },
        isFixed:{
            type:Boolean,
            default:true
        },
        isAuth:{
            type:Boolean,
            default:true
        },
    },
    watch: {
    },
    data () {
        return {
        }
    },
    computed:{
        mybtns(){
            if(!this.isAuth || !this.lr_pageAuthInfo.isAuth ){
                return this.btns
            }
            else if(this.lr_pageAuthInfo.data  && this.lr_pageAuthInfo.data.buttons){
                return this.btns.filter(t=>this.lr_pageAuthInfo.data.buttons.indexOf(t.prop) > -1)
            }
            return []
        },

        btns1(){
            let btns = [];
            for(let i =0;i < 2;i++){
                btns.push(this.mybtns[i]);
            }
            return btns;
        },
        btns2(){
            let btns = [];
            for(let i =2,len = this.btns.length;i < len;i++){
                btns.push(this.mybtns[i]);
            }
            return btns;
        },
        width(){
            let width  = 21;
            let len = this.mybtns.length;
            if(len >= 1){
                 width +=  this.mybtns[0].width || 28;
            }

            if(len >= 2){
                 width +=  this.mybtns[1].width || 38;
            }

            if(len == 3){
                 width +=  this.mybtns[2].width || 36;
            }

            if(len > 3){
                 width +=  20;
            }

            return width;
        }
    },
    methods:{
        myfilterBtns(row,btns){
            if(this.filterBtns){
                return this.filterBtns(row,this.$deepClone(btns))
            }
            else{
                return btns
            }
        },
        handleCommand(command){
            this.$emit('click',command);
        },
        handleClick(rowIndex,row,type){
            this.$emit('click',{rowIndex:rowIndex,row:row,type:type});
        }
    }
}
</script>
<style lang="scss" scoped>
</style>